<style scoped>
@import "@/assets/table.css";
</style>
<template>
  <el-table
      :data="tableData"
      class="tableWH"
      @selection-change="handleSelectionChange"
      :header-cell-style="{background:'#eee',color:'#606266'}"
      @sort-change="sortChange"
  >
    <el-table-column
        type="selection"
        header-align="center"
        align="center"
    />

    <el-table-column
        :label="tableDataText.categoryId"
        prop="id"
        header-align="center"
        align="center"
    >
      <template #default="scope">
        {{scope.$index+1+pageSize*(currentPage-1)}}
      </template>
    </el-table-column>

    <el-table-column
        :label="tableDataText.categoryName"
        prop="name"
        header-align="center"
        align="center"
    />

    <el-table-column
        :label="tableDataText.categoryDescription"
        prop="description"
        header-align="center"
        align="center"
    />

    <el-table-column
        :label="tableDataText.remark"
        prop="remark"
        header-align="center"
        align="center"
    />

    <el-table-column
        prop="time"
        :label="tableDataText.categoryDate"
        header-align="center"
        align="center"
        sortable="custom"
    />

    <el-table-column
        :label="tableDataText.handle"
        header-align="center"
        align="center"
    >
      <template #default="scope">
        <el-button
            size="small"
            @click="handleEdit(scope.row)"
        >
          编辑
        </el-button>
        <el-button
            size="small"
            type="danger"
            @click="handleDelete(scope.row)"
        >删除
        </el-button>
      </template>
    </el-table-column>
  </el-table>
  <div
      class="pagination"
  >
    <el-pagination
        background
        layout="prev, pager, next"
        :total="total"
        :page-size="pageSize"
        @current-change="currentChange"
        v-model:current-page="currentPage"
    />
  </div>
  <el-dialog
      v-model="dialogFormVisibleUpdate"
      width="500"
      title="分类编辑"
  >
    <el-form
        :model="dialogFormData"
    >
      <el-form-item
          label="分类编号："
      >
        <el-input
            v-model="dialogFormData.id"
            disabled="disabled"
        />
      </el-form-item>
      <el-form-item
          label="分类名称："
      >
        <el-input
            v-model="dialogFormData.name"
        />
      </el-form-item>
      <el-form-item
          label="分类描述："
      >
        <el-input
            v-model="dialogFormData.description"
        />
      </el-form-item>
      <el-form-item
          label="分类备注："
      >
        <el-input
            v-model="dialogFormData.remark"
            type="textarea"
            placeholder="请输入备注信息"
            show-word-limit
            maxlength="250"
        />
      </el-form-item>
      <el-form-item
          label="创建时间："
      >
        <el-input
            v-model="dialogFormData.time"
            disabled="disabled"
        />
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button
            @click="dialogFormVisibleUpdate = false"
        >
          取消
        </el-button>
        <el-button
            type="primary"
            @click="updateCategory"
        >
          修改
        </el-button>
      </div>
    </template>
  </el-dialog>
  <el-dialog
      v-model="dialogFormVisibleDelete"
      title="分类删除"
      width="500"
  >
    <span>确定删除吗？</span>
    <template #footer>
      <div class="dialog-footer">
        <el-button
            @click="dialogFormVisibleDelete = false"
        >
          取消
        </el-button>
        <el-button
            type="primary"
            @click="deleteCategory"
        >
          确定
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script lang="ts" setup>
import {onMounted, ref} from 'vue'
import {ElMessage, ElTable} from 'element-plus'
import {
  getCategoryAPI,
  updateCategoryAPI,
  deleteCategoryAPI
} from "@/axios/api";
import {useCounterStore} from "@/stores/counter"

const counterStore = useCounterStore()
const pageSize = ref(10)//页数
const currentPage = ref(1)//页码
const total = ref(0)//总条数
const sort = ref(0)//正逆顺序
const tableDataText = {
  categoryId: "分类编号",
  categoryName: "分类名称",
  categoryDescription: "分类描述",
  remark: "备注",
  categoryDate: "创建时间",
  handle: "操作"
}
const tableData = ref([])//存放请求数据
const multipleSelection = ref([])//全选
const dialogFormVisibleUpdate = ref(false)//编辑
const dialogFormVisibleDelete = ref(false)//删除
const dialogFormData = ref({})//编辑操作中间值
const handleDeleteIndex = ref(0)//删除操作中间值


onMounted(() => {
  getCategory()
})

function getCategory() {//获取分类列表
  getCategoryAPI({
    pageSize: pageSize.value,
    pageNum: currentPage.value,
    sort: sort.value
  }).then(data => {
    tableData.value = data.data.data.categoryList
    total.value = data.data.data.total
  })
}

function currentChange() {//分页
  console.log(currentPage.value)
  getCategory()
}

function handleSelectionChange(val) {//全选
  multipleSelection.value = val
}

function handleEdit(row) {//分类编辑
  dialogFormData.value = JSON.parse(JSON.stringify(row))
  dialogFormVisibleUpdate.value = true
}

function updateCategory() {//分类修改
  dialogFormVisibleUpdate.value = false
  updateCategoryAPI(dialogFormData.value).then(data => {
    console.log(data)
    getCategory()
    ElMessage.success(data.data.data)
  })
}

function handleDelete(row) {//分类删除
  handleDeleteIndex.value = row.id
  dialogFormVisibleDelete.value = true
}
function sortChange(val){
  if (val.order == "ascending" || val.order == null) {
    sort.value = 0
  } else if (val.order == "descending") {
    sort.value = 1
  }
  getCategory()
}
function deleteCategory() {
  if (multipleSelection.value.length === 0) {
    deleteCategoryAPI({
      ids: handleDeleteIndex.value
    }).then(data => {
      console.log(data)
      getCategory()
      ElMessage.success(data.data.data)
    })
  } else {
    for (let i = 0; i < multipleSelection.value.length; i++) {
      deleteCategoryAPI({
        ids: multipleSelection.value[i].id
      }).then(data => {
        console.log(data)
        getCategory()
        if (i == multipleSelection.value.length - 1) {
          ElMessage.success(data.data.data)
        }
      })
    }
  }
  dialogFormVisibleDelete.value = false
}

</script>
